<template>
	<view class="app" :class="{overhidden: list.length === 0}">
		<!-- 头部 -->
		<!-- <page-header 
			:keyword="keyword" 
			:listType="listType" 
			:sourcePage="sourcePage"
			@delKeyword="delKeyword" 
			@changeListType="changeListType"
		></page-header> -->
		<view class="top" >
			<!-- 排序 -->
			<view class="sort-bar row">
				<view class="item row center" :class="{active: item.current, last: index === sortList.length-1}" v-for="(item,index) in sortList" :key="index" @click="changeSort(item)">
					<text>{{ item.name }}</text>
					<!-- <view v-if="item.isPrice"  class="icon-wrap">
						<text class="mix-icon icon-down" :class="{active: item.type === 3}"></text>
						<text class="mix-icon icon-arrow-top" :class="{active: item.type === 4}"></text>
					</view> -->
				</view>
			</view>
		</view>
		<!-- <view class="hot-wrap" :class="{show: loaded}">
			<game-list ref="gameList" :list="gameList"></game-list>
		</view> -->
		<!-- 产品列表 -->
		<mescroll-body
			ref="mescrollRef" 
			@init="mescrollInit" 
			:top="headerHeight" 
			@down="downCallback" 
			:up="upOption" 
			@up="loadList" 
		>
			<game-list ref="gameList" :list="gameList"></game-list>
		</mescroll-body>
		<!-- #ifdef MP-WEIXIN -->
		<!-- <mix-load-more :status="loadingType"></mix-load-more> -->
		<!-- #endif -->
		<mix-loading v-if="isLoading"></mix-loading>
	</view>
</template>

<script>
	import pageHeader from './components/page-header'
	import MescrollBody from "@/components/mescroll-uni/mescroll-body.vue"
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	import gameList from '@/pages/game/components/game-list.vue'
	export default {
		components: {
			pageHeader,
			MescrollBody,
			gameList
		},
		mixins: [MescrollMixin], 
		data() {
			return {
				sourcePage: '', //来源页 主要用来判断是否来自搜索页
				listType: 'column', //列表类型 column竖向列表 row 横向列表
				sortList: [
					// {name: '全部', type: 0, current: true},
					{name: '积分赛', type: 1, current: true},
					// {name: '抢票赛', type: 3, isPrice: true, current: false},
					{name: '抢票赛', type: 2, current: false},
					{name: '掘金赛', type: 3, current: false}
				],
				isHot: 0,//热门推荐
				keyword: '',
				cateList: [], //分类列表
				// curCateItem: {}, //当前分类
				list: [], //商品列表
				upOption:{
					auto: false, // 不自动加载
					page: {
					 	num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
					 	size: 10 // 每页数据的数量
					},
					noMoreSize: 4, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
				},
				gameList: [],
				top3PlayersSource: [],
				loaded: true,
				type: 0,
			}
		},
		computed: {
			statusBarHeight(){
				return this.systemInfo.statusBarHeight
			},
			navigationBarHeight(){
				return this.systemInfo.navigationBarHeight;
			},
			headerHeight(){
				// return 750 / uni.upx2px(750) * (this.navigationBarHeight + this.statusBarHeight) + 96;
				return 0;
			},
		},
		onLoad(options) {
			this.isLoading = true;
			this.sourcePage = options.sourcePage || '';
			this.keyword = options.keyword || ''; //搜索关键字
			this.prePage = options.prePage; //来源页 主要用于区分是否来自搜索页面
			//热门推荐
			this.isHot = options.isHot || 0;
		},
		onShow() {
			var tab = this.$store.state.gameTab;
			console.log("tab>>"+tab=='undefined');
			console.log("tab>>"+tab);
			if(tab !== ''){
				this.sortList.forEach(v=>{
					if(v.type==tab){
						// v.current = true
						this.changeSort(v);
					}
				});
				this.$store.commit('setStateAttr', {
					key: 'gameTab',
					val: ''
				});
			}else{
				this.sortList.forEach(v=>{
					if(v.type==1){
						this.changeSort(v);
					}
				});
			}
		},
		methods: {
			//加载产品列表
			async loadList(e){
				// console.log("==loadList==")
				// this.loadRankingList(e);
				this.loadGameList(e);
			},
			async loadGameList(e){
				const res = await this.$request("GameList","GameList", {
					pageNo: e.num,
					pageSize: e.size,
					type: this.type
				})
				// console.log("==RankingList=="+JSON.stringify(res))
				const curList = res.result.records;
				if(e.num === 1){
					this.gameList = [];
					this.loaded && curList.forEach(item=> {item.loaded = true;})
					if(curList.length > 0){
						uni.pageScrollTo({
							scrollTop: 0,
							duration: 200
						})
					}
				}
				this.gameList = this.gameList.concat(curList); //追加新数据
				// this.gameList = curList;
				// this.gameList.concat(this.rankingList.concat(curList));
				// this.gameList = this.rankingList.concat(curList); //追加新数据
				// console.log("===rankingList=="+JSON.stringify(this.rankingList))
				this.mescroll.endSuccess(curList.length); //结束加载状态
			},
			async loadRankingList(e){
				// this.mescroll.removeEmpty();
				// const {sortList, curCateItem, keyword} = this;
				// const data = {
				// 	sort_type: sortList.filter(item=> item.current)[0].type,
				// 	cate_id: curCateItem._id || '',
				// 	first_cate_id: curCateItem.parent_id || '',
				// 	keyword,
				// 	is_hot: this.isHot,
				// 	offset: (e.num - 1) * e.size,
				// 	limit: e.size,
				// }
				// this.$refs.productList.loadType = e.num === 1 ? 'refresh' : 'add';
				// const res = await this.$request('product', 'GoodsList', data);
				// const curList = res.data;
				// if(e.num === 1){
				// 	//第一页清空数据重载
				// 	this.list = [];
				// 	this.loaded && curList.forEach(item=> {item.loaded = true;})
				// 	if(curList.length > 0){
				// 		uni.pageScrollTo({
				// 			scrollTop: 0,
				// 			duration: 200
				// 		})
				// 	}
				// } 
				// this.list = this.list.concat(curList); //追加新数据
				// this.mescroll.endSuccess(curList.length); //结束加载状态
				const res = await this.$request_mock("RankingListTop3","RankingListTop3", {
					pageNo: this.page,
					pageSize: 3
				})
				// console.log("==RankingList=="+JSON.stringify(res))
				const curList = res.data.records;
				// if(e.num === 1){
					this.top3PlayersSource = curList.slice(0, 3)
				// }
				// console.log("===loadGameList=1=="+JSON.stringify(curList))
				// console.log("===loadGameList=2=="+JSON.stringify(this.top3Players))
				this.rankingList = this.rankingList.concat(curList.slice(3, curList.length)); //追加新数据
				// console.log("===rankingList=="+JSON.stringify(this.rankingList))
				// this.mescroll.endSuccess(curList.length); //结束加载状态
			},
			
			mescrollInit(mescroll){
				this.mescroll = mescroll;
				setTimeout(()=>{
					this.refreshList();
				}, 10)
			},
			//刷新列表
			refreshList(){
				this.mescroll.resetUpScroll(false)
				this.isLoading = true;
			},
			//分类默认 处理分类滚动
			// calcCateRect(){
			// 	const tasks = [];
			// 	this.cateList.forEach(async item=> {
			// 		tasks.push(new Promise(resolve => {
			// 			uni.createSelectorQuery().select(`#cate-${item._id}`).boundingClientRect(data => {
			// 				item.left = data.left - (uni.upx2px(375) - data.width/2);
			// 				resolve();
			// 			}).exec()
			// 		}))
			// 	})
			// 	Promise.all(tasks).then(()=>{
			// 		let cur = this.cateList.filter(item=> item._id === this.curCateItem._id);
			// 		if(cur.length > 0){
			// 			this.curCateItem = cur[0];
			// 		}
			// 	})
			// },
			//排序
			changeSort(item){
				this.log("=changeSort=="+JSON.stringify(item));
				this.type = item.type;
				if(item.current){
					if(item.isPrice){
						item.type = item.type === 3 ? 4 : 3;
					}else{
						return;
					}
				}else{
					this.sortList.forEach(v=> v.current = false);
					item.current = true;
					if(item.type === 3 || item.type === 4){
						item.type = 3;
					}
				}
				this.refreshList();
			},
			//删除搜索关键字
			delKeyword(){
				this.keyword = '';
				this.refreshList();
			},
		}
	}
</script>

<style>
	page{
		background-color: #f8f8f8;
	}
</style>
<style scoped lang="scss">
	.app{
		/* #ifndef MP */
		&.overhidden{
			height: 100vh;
			overflow: hidden;
		}
		/* #endif */
	}
	
	.hot-wrap{
		padding-top: 20rpx;
		background: linear-gradient(to bottom, #fff 10rpx, #f7f7f7);
		opacity: 0;
		transition: opacity .2s;
		
		&.show{
			opacity: 1;
		}
		.floor-header{
			padding-bottom: 30rpx;
		}
		/deep/ .list-item{
			box-shadow: 4rpx 0 10rpx rgba(0,0,0,.06);
		}
	}
	
	/deep/ .mix-empty .default{
		padding-top: 38vh;
		/* #ifdef H5 */
		padding-top: 34vh;
		/* #endif */
	}
	.top{
		// position: fixed;
		left: 0;
		width: 100%;
		z-index: 95;
		background-color: #fff;
	}
	.sort-bar{
		justify-content: space-around;
		height: 76rpx;
		padding: 4rpx 0 4rpx 4rpx;
		/* #ifdef MP */
		padding-left: 10rpx;
		/* #endif */
		background-color: #fff;
		position: relative;
		z-index: 1;
		
		.item{
			flex: 1;
			height: 100%;
			font-size: 28rpx;
			color: #333;
			position: relative;
			overflow: hidden;
			
			&.active{
				color: $base-color;
				font-weight: 700;
				
				&:after{
					position: absolute;
					left: 50%;
					bottom: 0;
					transform: translateX(-28rpx);
					content: '';
					width: 56rpx;
					height: 4rpx;
					background-color: $base-color;
					border-radius: 10px;
				}
				.mix-icon.active{
					color: $base-color;
				}
			}
			/* #ifdef MP */
			&.last:before{
				content: '';
				position: absolute;
				right: 0;
				top: 50%;
				transform: translateY(-50%);
				width: 2rpx;
				height: 40rpx;
				box-shadow: 0 0 16rpx rgba(0,0,0,.6);
			}
			/* #endif */
		}
		.icon-wrap{
			display: flex;
			flex-direction: column;
			padding-left: 8rpx;
		}
		.mix-icon{
			font-size: 14rpx;
			color: #bbb;
		}
		.btn{
			height: 68rpx;
			padding-left: 16rpx;
			padding-right: 20rpx;
			
			.icon-hengxiangliebiao, .icon-shuxiangliebiao{
				font-size: 40rpx;
				color: #333;
			}
		}
	}
	.cate-bar:after{
		border-color: #f5f5f5;
	}
	.cate-wrap{
		flex-wrap: nowrap;
		height: 96rpx;
		padding-bottom: 4rpx;
		
		.fill-view{
			flex-shrink: 0;
			width: 20rpx;
			height: 20rpx;
			
			&:last-child{
				width: 10rpx;
			}
		}
		.item{
			flex-shrink: 0;
			height: 58rpx;
			padding: 0 28rpx;
			margin-right: 20rpx;
			font-size: 22rpx;
			color: #333;
			text-align: center;
			line-height: 58rpx;
			background-color: #f5f5f5;
			border-radius: 100px;
		}
		.active{
			color: $base-color;
			background-color: #fff8f4;
			font-weight: 700;
		}
	}
</style>
